<!--
 * @Author: xiongang 407700216@qq.com
 * @Date: 2022-07-09 15:48:11
 * @LastEditors: cool panda
 * @LastEditTime: 2023-04-02 15:32:21
 * @FilePath: \big-screen-vue-datav\src\components\echart\bottom\bottomLeftChart\chart.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <!-- 年度开工率 -->
    <Echart
      :options="options"
      id="bottomLeftChart"
      height="270px"
      width="100%"
    ></Echart>
  </div>
</template>

<script>
import Echart from '@/common/echart'
export default {
  data () {
    return {
      options: {},
    };
  },
  components: {
    Echart,
  },
  props: {
    cdata: {
      type: Object,
      default: () => ({})
    },
  },
  watch: {
    cdata: {
      handler (newData) {
        console.log(newData);
        this.options = {
          title: {
            text: '加油量/加油架次',
            textStyle: {
              color: '#FFFFFF',
              fontSize: '12PX',
            },
            top: '10px',
            left: '5px'
          },
          grid: {
            left: '11%',
            right: '4%',
            bottom: '25%',
            top: '20%'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['加油量', '加油架次'],
            top: '10px',
            right: '10px',
            textStyle: {
              color: '#FFFFFF',
              fontSize: '12PX',
            },
          },
          calculable: true,
          xAxis: [
            {
              type: 'category',
              // prettier-ignore
              data: ['2018', '2019', '2020', '2021', '2022']
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '加油量',
              type: 'bar',
              data: [
                149, 270, 232, 956, 767
              ],
              itemStyle: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#0AD5A1' },
                  { offset: 0.5, color: '#0A9E4D' },
                  { offset: 1, color: '#0A9E4D' }
                ])
              },
              barWidth: '14px'
            },
            {
              name: '加油架次',
              type: 'bar',
              data: [
                226, 459, 590, 264, 287
              ],
              itemStyle: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#3995FC' },
                  { offset: 0.5, color: '#076EC1' },
                  { offset: 1, color: '#076EC1' }
                ])
              },
              barWidth: '14px'
            }
          ]
        }
      }, immediate: true,
      deep: true
    }
  }
}
</script>